<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">


<li id="no-data-li" th:if="${#lists.isEmpty(dataMap)}">
    <section class="no-data__wrap">
        <em>&nbsp;</em>
        <p>亲，今日没有直播~~~</p>
    </section>
</li>

<!--<section class="no-data__wrap no-account-data__wrap">-->
<!--<em>&nbsp;</em>-->
<!--<p>亲，今日暂无可学习的课程~~~</p>-->
<!--</section>-->

<li class="item-content pt5" th:if="!${#lists.isEmpty(dataMap)}" th:each=" catalog :${dataMap}">
    <div class="item-media">
        <span class="lecture-icon"></span>
    </div>
    <div class="item-inner h-item-inner s-r-inner" style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">
        <section class="item-title">
            <a class="item-content-record">
                <div class="item-inner inner-record">
                    <section class="item-title">
                        <div class="ellipsis">
                            <span class="fs7 c-888"
                                  th:text="${catalog['courseTypeKey']}=='LIVE'?'[直播课]'+${catalog['courseName']}:'[小班课]'+${catalog['courseName']}"> 短视频涨粉策略技能强化</span>
                        </div>
                        <div class="mt5">
                            <span class="wm-cm-title" th:if="!${#strings.isEmpty(catalog['parentName'])}" th:text="${catalog['parentName']}">第一章节：软分叉与硬分叉</span>
                            <span class="wm-cm-title" th:if="!${#strings.isEmpty(catalog['catalogName'])} and !${#strings.isEmpty(catalog['parentName'])}"> — </span>
                            <span class="wm-cm-title" th:if="!${#strings.isEmpty(catalog['catalogName'])}" th:text="${catalog['catalogName']}">第二节：在线讲解分叉原理</span>
                        </div>
                    </section>
                </div>
            </a>
            <section class="pt5">
                <div class="row no-gutter">
                    <aside class="col-60">
                        <span class="fs4 c-666" th:text="'今日'+${#dates.format(catalog['lessonStartTime'],'HH:mm')}">今日 15:22</span>
                        <span class="fs4 c-666" th:if="${catalog['livePlayState']}==3 and ${catalog['replay']} !=1">「已结束」</span>
                        <span class="fs4 c-red" th:if="${catalog['livePlayState']}==1">「正在直播」</span>
                        <span class="fs4 c-red" th:if="${catalog['livePlayState']}==4">「提前进入」</span>
                        <span class="fs4 c-666" th:if="${catalog['livePlayState']}==2">「未开始」</span>
                    </aside>
                    <aside class="col-40 text-right">
                        <a href="javascript:void(0)" th:data-course="${catalog['courseId']}" th:data-id="${catalog['id']}" class="button button-fill button-round disabled watch-live live-play" th:onclick="'javascript:enterLive('+'\''+${catalog['packageId']}+'\','+'\''+${catalog['courseId']}+'\','+'\''+${catalog['courseTypeKey']}+'\','+'\''+${catalog['materialId']}+'\','+'\''+${catalog['id']}+'\','+'\''+${catalog['livePlayState']}+'\','+'\''+${catalog['replay']}+'\','+'\''+${catalog['catalogName']}+'\','+'\''+${catalog['backCode']}+'\''+')'" th:if="${catalog['livePlayState']}==3 and ${catalog['replay']}==1"> 看回放 </a>
                        <a href="javascript:void(0)" th:data-course="${catalog['courseId']}" th:data-id="${catalog['id']}" class="button button-fill button-round disabled watch-live live-play" th:onclick="'javascript:enterLive('+'\''+${catalog['packageId']}+'\','+'\''+${catalog['courseId']}+'\','+'\''+${catalog['courseTypeKey']}+'\','+'\''+${catalog['materialId']}+'\','+'\''+${catalog['id']}+'\','+'\''+${catalog['livePlayState']}+'\','+'\''+${catalog['replay']}+'\','+'\''+${catalog['catalogName']}+'\','+'\''+${catalog['backCode']}+'\''+')'" th:if="${catalog['livePlayState']}==3 and ${catalog['replay']} !=1"> 已结束 </a>
                        <a href="javascript:void(0)" th:data-course="${catalog['courseId']}" th:data-id="${catalog['id']}" class="button button-fill button-round button-danger button-inline fs6 live-play" th:onclick="'javascript:enterLive('+'\''+${catalog['packageId']}+'\','+'\''+${catalog['courseId']}+'\','+'\''+${catalog['courseTypeKey']}+'\','+'\''+${catalog['materialId']}+'\','+'\''+${catalog['id']}+'\','+'\''+${catalog['livePlayState']}+'\','+'\''+${catalog['replay']}+'\','+'\''+${catalog['catalogName']}+'\','+'\''+${catalog['backCode']}+'\''+')'" th:if="${catalog['livePlayState']}==1"> 进入直播 </a>
                        <a href="javascript:void(0)" th:data-course="${catalog['courseId']}" th:data-id="${catalog['id']}" class="button button-fill button-round button-danger button-inline fs6 live-play" th:onclick="'javascript:enterLive('+'\''+${catalog['packageId']}+'\','+'\''+${catalog['courseId']}+'\','+'\''+${catalog['courseTypeKey']}+'\','+'\''+${catalog['materialId']}+'\','+'\''+${catalog['id']}+'\','+'\''+${catalog['livePlayState']}+'\','+'\''+${catalog['replay']}+'\','+'\''+${catalog['catalogName']}+'\','+'\''+${catalog['backCode']}+'\''+')'" th:if="${catalog['livePlayState']}==4"> 提前进入 </a>
                        <a href="javascript:void(0)" th:data-course="${catalog['courseId']}" th:data-id="${catalog['id']}" class="button button-fill button-round button-success watch-live live-playback live-play" th:onclick="'javascript:enterLive('+'\''+${catalog['packageId']}+'\','+'\''+${catalog['courseId']}+'\','+'\''+${catalog['courseTypeKey']}+'\','+'\''+${catalog['materialId']}+'\','+'\''+${catalog['id']}+'\','+'\''+${catalog['livePlayState']}+'\','+'\''+${catalog['replay']}+'\','+'\''+${catalog['catalogName']}+'\','+'\''+${catalog['backCode']}+'\''+')'" th:if="${catalog['livePlayState']}==2">未开始</a>
                    </aside>
                </div>
            </section>
        </section>
    </div>
</li>

</html>